id = GetParam();
var data;
if(id === undefined) {
    alert("获取ID失败");
} else {
    loadSongDetail(id);
    loadComment(id);
    loadLrcDetail(id);
}

function loadSongDetail(id) {
    $.get(api_single,{
        "id":id
    },function(dd) {
        d = $.parseJSON(dd);
        document.getElementById("songCover").src = d["cover"];
        document.getElementById("songName").innerHTML = d["name"];
        document.getElementById("songArtist").innerHTML = d["artist"];
    });
}

function loadComment(id) {
    $.get(api_comment_song,{
        "id":id
    },function(d) {
        data = d;
        loadHot();
        runComment();
    });
}
function loadHot() {
    comment = document.getElementById("comment-hot");
    d = data["hotComments"];
    comment.innerHTML ="";
    for(i=0; i<d.length; i++) {
        text = "<div class=\"comment\">\
                    <div class=\"imgdiv\">\
                        <img class=\"imgcss\"  src=\""+d[i]["user"]["avatarUrl"]+"\"/>\
                    </div>\
                    <div class=\"conmment_details\">\
                        <span class=\"comment_name\">"+d[i]["user"]["nickname"]+" </span> \
                        <span>"+getLocalTime(d[i]["time"])+"</span>\
                        <div class=\"comment_content\" >"+d[i]["content"]+"</div>\
                        <div class=\"del\"> <i class=\"layui-icon layui-icon-heart-fill\"  >赞("+d[i]["likedCount"]+")</i>\
                    </div>\
                </div>\
            <hr>\
    </div>";
    comment.innerHTML+=text;
    }
}
function runComment() {
    comment = document.getElementById("comment");
    count = data.total;
    layui.use('laypage', function(){
        var laypage = layui.laypage;
        laypage.render({
            elem: 'comment-page-jump',
            count: count,
            limit: 20,
            jump: function(obj, first){
                $.get(api_comment_song,{
                    "id":id,
                    "offset":(obj.curr-1)*obj.limit,
                },function(dd) {
                    d = dd["comments"];
                    comment.innerHTML ="";
                    for(i=0; i<d.length; i++) {
                        text = "<div class=\"comment\">\
                                    <div class=\"imgdiv\">\
                                    <img class=\"imgcss\"  src=\""+d[i]["user"]["avatarUrl"]+"\"/>\
                                </div>\
                                <div class=\"conmment_details\">\
                                    <span class=\"comment_name\">"+d[i]["user"]["nickname"]+" </span> \
                                    <span>"+getLocalTime(d[i]["time"])+"</span>\
                                    <div class=\"comment_content\" >"+d[i]["content"]+"</div>\
                                    <div class=\"del\"> <i class=\"layui-icon layui-icon-heart-fill\"  >赞("+d[i]["likedCount"]+")</i>\
                                </div>\
                                </div>\
                                <hr>\
                            </div>";
                    comment.innerHTML+=text;
                    }
                });
            }
        });
    });

}

function getLocalTime(nS) {     
    return new Date(parseInt(nS) ).toLocaleString().replace(/:\d{1,2}$/,' ');     
 }
 
function playA() {
    play(id);
    document.getElementById("playBtn").style.display = "none";
}

function loadLrcDetail(id) {
    $.get(api_lrc,{
        "id":id
    },function(data) {
        document.getElementById("lrc_content").innerHTML=data;
        var medis = document.getElementById('lrc_content').innerHTML;
        var medises = medis.split("\n");    // 用换行符拆分获取到的歌词
        $.each(medises, function (i, item) {    // 遍历medises，并且将时间和文字拆分开，并push进自己定义的数组，形成一个对象数组
          var t = item.substring(item.indexOf("[") + 1, item.indexOf("]"));
          medisArray.push({
      
            t: (t.split(":")[0] * 60 + parseFloat(t.split(":")[1])).toFixed(3),
            c: item.substring(item.indexOf("]") + 1, item.length)
          });
        });
        var ul = $("#text");
        // 遍历medisArray，并且生成li标签，将数组内的文字放入li标签
        $.each(medisArray, function (i, item) {
          var li = $("<li style='list-style: none;'>");
          li.html(item.c);
          ul.append(li);
        });
    });
}


var medisArray = new Array();   // 定义一个新的数组


var fraction = 0.5;
var topNum = 0;
function lineHeight(lineno){
  var ul = $("#text");
  var $ul = document.getElementById('text');
 // 令正在唱的那一行高亮显示
  if (lineno > 0) {
    $(ul.find("li").get(topNum + lineno - 1)).removeClass("lineheight");
  }
  var nowline = ul.find("li").get(topNum + lineno);
  $(nowline).addClass("lineheight");

    // 实现文字滚动
  var _scrollTop;
  $ul.scrollTop = 0;
  if ($ul.clientHeight * fraction > nowline.offsetTop) {
    _scrollTop = 0;
  } else if (nowline.offsetTop > ($ul.scrollHeight - $ul.clientHeight * (1 - fraction))) {
    _scrollTop = $ul.scrollHeight - $ul.clientHeight;
  } else {
    _scrollTop = nowline.offsetTop - $ul.clientHeight * fraction;
  }

  //以下声明歌词高亮行固定的基准线位置成为 “A”
  if ((nowline.offsetTop - $ul.scrollTop) >= $ul.clientHeight * fraction) {
    //如果高亮显示的歌词在A下面，那就将滚动条向下滚动，滚动距离为 当前高亮行距离顶部的距离-滚动条已经卷起的高度-A到可视窗口的距离
    $ul.scrollTop += Math.ceil(nowline.offsetTop - $ul.scrollTop - $ul.clientHeight * fraction);

  } else if ((nowline.offsetTop - $ul.scrollTop) < $ul.clientHeight * fraction && _scrollTop != 0) {
    //如果高亮显示的歌词在A上面，那就将滚动条向上滚动，滚动距离为 A到可视窗口的距离-当前高亮行距离顶部的距离-滚动条已经卷起的高度
    $ul.scrollTop -= Math.ceil($ul.clientHeight * fraction - (nowline.offsetTop - $ul.scrollTop));

  } else if (_scrollTop == 0) {
    $ul.scrollTop = 0;
  } else {
    $ul.scrollTop += $(ul.find('li').get(0)).height();
  }
}
var lineNo = 10;

